<template>
  <div>
    <div style="font-size:14px;font-weight:600;margin-bottom:10px;margin-top:-5px;">主机管理</div>
    <div class="card">
      <div style="display:flex;justify-content: space-between;">
        <el-button type="primary" @click="addNew('')">新增主机</el-button>
        <el-form :inline="true" :model="form" >
          <el-form-item>
            <el-input clearable class="input-border-style" v-model="form.user" placeholder="主机名称" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="dataList" style="width: 100%;font-size:12px;">
        <el-table-column prop="appname" label="主机名称" width="180" header-align="center" align="center"/>
        <el-table-column prop="outerIp" label="外网IP" width="180" header-align="center" align="center"/>
        <el-table-column prop="innerIp" label="内网IP" header-align="center" align="center"/>
        <el-table-column prop="remark" label="备注" header-align="center" align="center"/>
        <el-table-column prop="status" label="状态" header-align="center" align="center">
          <template #default="scope">
            <status-success  v-if="scope.row.status==1">正常</status-success>
            <status-error  v-if="scope.row.status==2">异常</status-error>
            <span v-if="scope.row.status==3"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <el-button link @click="addNew(scope.row.id)">修改</el-button>
            <el-button link @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;justify-content: right;display:flex;">
        <el-pagination  background layout="prev, pager, next" :total="total" />
      </div>
      
    </div>

    <el-dialog
          :title="warnObj.id?'修改':'新增'"
          v-model="warnVisible"
          width="40%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          >
          <div>
              <el-form ref="warnObj" :model="warnObj" label-width="80px" :rules="rules">
                  <el-form-item label="主机名称" prop="appname">
                      <el-input class="input-border-style" v-model="warnObj.appname" ></el-input>
                  </el-form-item>
                  <el-form-item label="外网地址" prop="outerIp">
                      <el-input class="input-border-style" v-model="warnObj.outerIp" ></el-input>
                  </el-form-item>
                  <el-form-item label="内网地址" prop="innerIp">
                      <el-input class="input-border-style" v-model="warnObj.innerIp" ></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                      <el-input class="input-border-style" v-model="warnObj.remark" ></el-input>
                  </el-form-item>
              </el-form>
          </div>
          <div class="dialog-footer" style="text-align:center;">
              <el-button  @click="warnVisible = false;warnObj={}">取 消</el-button>
              <el-button  type="primary" @click="submit('warnObj')">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import http from '../utils/request'
import StatusError from './components/status-error.vue';
import statusSuccess from './components/status-success.vue';
export default {
  components: { statusSuccess, StatusError },
  data(){
    return{
      form:{},
      dataList:[],
      total:0,
      page:1,
      urls:{
          page: window.SITE_CONFIG['apiURL']+'/api/app/page',
          add: window.SITE_CONFIG['apiURL']+'/api/app/add',
          update: window.SITE_CONFIG['apiURL']+'/api/app/update',
          delete:  window.SITE_CONFIG['apiURL']+'/api/app/delete',
          getById: window.SITE_CONFIG['apiURL']+'/api/app/getById'
      },
      warnVisible:false,
      warnObj:{},
      rules:{
          appname: [
              { required: true, message: '必填项不能为空', trigger: 'blur' }
          ],
          // outerIp: [
          //     { required: true, message: '必填项不能为空', trigger: 'blur' }
          // ],
          // innerIp: [
          //     { required: true, message: '必填项不能为空', trigger: 'blur' }
          // ],
          // remark: [
          //     { required: true, message: '必填项不能为空', trigger: 'blur' }
          // ],
      },
    }
  },
  mounted(){
      this.getData();
  },
  methods:{
    getData(){
      var that = this;
      var param = this.form;
      param.page = this.page;
      http.get(this.urls.page,{params:param})
      .then(({ data: res }) => {
          if (res.code !== 0) {
              return this.$message.error(res.msg)
          }
          this.dataList = res.data.list;
          this.total = res.data.total;
      }).catch(() => {})
    },
    addNew(id){
        if(id){
            http.get(this.urls.getById,{params:{id:id}})
            .then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.warnObj = res.data;
                this.warnVisible = true;
            }).catch(() => {})
        }else{
            this.warnVisible = true;
        }
    },
    submit(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        }else{
          var url = this.warnObj.id ? this.urls.update : this.urls.add;
          http.post(url,this.warnObj)
          .then(({ data: res }) => {
              if (res.code !== 0) {
                  return this.$message.error(res.msg)
              }
              this.getData();
              this.$refs[formName].resetFields();
              this.warnVisible = false;
          }).catch(() => {})
        }
      })
    },
    del(id){
      http.get(this.urls.delete,{params:{id:id}})
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.getData();
        }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.card{
  width:100%;
  background-color: #fff;
  /* -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0/10%)!important;
  box-shadow: 0 2px 12px 0 rgb(0 0 0/10%)!important; */
  border-radius: 0px;
  /* padding:10px; */
  height:calc(100vh - 115px);
}

.table{
  width:100%;
  border-collapse:collapse;
  
}

/* .table tr{
  border-bottom: 1px solid #efefef;
}

.table tr:hover{
  background-color: #efefef;
}

.table th{
  background-color: #f2f5fc;
  line-height: 24px;
  border-bottom: 2px solid #000;
  color:#303133;
  font-weight: 600;
  padding-top:3px;padding-bottom: 3px;
}

.table td{
  line-height: 24px;
  border-bottom: 2px solid #dfe1e6;
  padding-left:5px;
  padding-right:5px;
  padding-top:4px;padding-bottom: 4px;
} */
</style>